<template>
  <div class="swtich-module-container">
    <div @click="handleShowOptions()" class="swtich-moudle">
      <div class="module-title">
        <!-- <img src="../../../common/assets/images/org.png" alt="" /> -->
        <em class="iconfont icon-Vector"></em>
        <span>{{ checkName || '请选择客户端' }}</span>
      </div>
      <em class="el-icon-caret-bottom"></em>
    </div>
    <x-select
      ref="selecCom"
      class="visble-select"
      v-model="checkVal"
      :node-key="'value'"
      :options="options"
      :attrOption="defaultProps"
    />
  </div>
</template>
<script>
  import { apiPostApplication } from '../api/index'
  import { EnumApiCode } from '../../../../../../globalEnum'

  export default {
    name: '',
    data() {
      return {
        checkVal: '',
        options: [],
        defaultProps: {
          label: 'clientName',
          value: 'clientId'
        },
        checkName: ''
      }
    },
    watch: {
      checkVal: {
        handler(val) {
          if (this.checkVal) {
            this.$emit('on-change', this.checkVal)
            const data = this.options.filter((v) => v[this.defaultProps.value] === this.checkVal)
            if (data?.length) {
              this.checkName = data[0][this.defaultProps.label]
            }
          }
        },
        immediate: true,
        deep: true
      }
    },
    created() {
      // 获取客户端数据
      this.initClientOptions()
    },
    methods: {
      initClientOptions() {
        apiPostApplication({ data: {}, pageNum: 1, pageSize: 10 }).then(({ code, data }) => {
          if (code === EnumApiCode.Success) {
            this.options = data.list
            console.log('this.options: ', this.options)
            if (!this.checkVal) {
              this.checkVal = 'srm-manage'
            }
          }
        })
      },
      handleShowOptions() {
        // console.log(099999, this.$refs.selecCom)
        this.$refs.selecCom.handleSelectFocus()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .swtich-module-container {
    position: relative;
    box-sizing: border-box;
    margin: 6px 0;
    border-radius: 3px;

    // &:active {
    //   background-color: rgba(126, 134, 142, 0.12);
    // }
    &:hover,
    :focus,
    :active,
    :visited {
      background-color: rgba(126, 134, 142, 0.12);
    }
    .swtich-moudle {
      font-size: 15px;
      position: absolute;
      top: 0;
      // left: 5px;
      display: flex;
      justify-content: space-between;
      width: 95%;
      color: #333;
      height: 32px;
      align-items: center;
      padding: 0 6px;
      box-sizing: border-box;
      &:hover,
      :focus,
      :active,
      :visited {
        background-color: transparent;
      }
      .module-title {
        flex: 3;
        display: flex;
        align-items: center;
        cursor: pointer;
        &:hover,
        :focus,
        :active,
        :visited {
          background-color: transparent;
        }
        span {
          padding-left: 3px;
          &:hover,
          :focus,
          :active,
          :visited {
            background-color: transparent;
          }
        }
      }

      img {
        width: 20px;
        height: 20px;
        border-radius: 3px;
        &:hover,
        :focus,
        :active,
        :visited {
          background-color: transparent;
        }
      }

      em {
        // line-height: 36px;
        &:hover,
        :focus,
        :active,
        :visited {
          background-color: transparent;
        }
      }
    }

    .visble-select {
      visibility: hidden;
    }
  }
</style>
